Cyberpunk 2077—User Interface (Part 1)

•

PART_00
INTRODUCTION

From 2018 I was (and I am still) working on Cyberpunk 2077 in the CD PROJEKT RED studio as a Senior UI Artist. And in this portfolio presentation, I want to show you some of the work I did there.

PART_01

USER INTERFACES FOR THE E3 TRAILER

One of the first tasks I was working on was the UI for the E3 trailer. From the metro map, wagon informational graphics on the windows, doors, ticket machines, the taxi drivers window decals ID and license, hacker's computers, over the mirror UI, economical AR projection, massive bigwig's crowd screen, to the plenty of unnoticeable pieces like a metro smartphone, smart home apps, airplane order of drinks, fashion store offers stripe, etc.

It was a stretch from the usual UI agenda, but it was a pleasant challenge and joy to kick it all off. Despite time running against us ㋛.

WIP

public static void main(String[UI_ART_BIBLE] args) {
       String className = "USER_INTERFACE";
       String newLine = "\n";
       String tab = "\t";
       String classStart = "public class " + className + " {";
       String closeBracket = "}";
       String mainStart = "public static void main(String[1989] args) {";
       String dummyContent = "";
       String temp = null;
       int size = 10000;
       System.out.println(result); // To display the output to the console
       PrintWriter out = null;
       }
       out.displayln(outputCode);
       out.close();

PART_02
USER INTERFACE ART BIBLE

This is the initial form of the User Interface Art Bible, the base of an aesthetical guide through the historical and technological eras of Cyberpunk 2077. It is to be taken with a grain of salt because things obviously changed over time. An example that stands above them all is the Neomilitarism style. It's the default style of player's UI and HUD. See for yourself and compare ㋛. It took quite an evolutionary path, yet the fundamentals defined here remained.

FOREWORD — Design and civilization have danced hand-in-hand since time immemorial. Whatever the human activity, design has never failed to react. Religion and its rituals, business, and economics, the inevitable progress of technology, competition through subterfuge, subtle coercion or open conflict, social upheaval, and political reconfiguration repeatedly and tremendously affected art, advertising, mass media, architecture, fashion, industrial design... essentially, the way the world looks and the way the world works. All of the above was considered in the development of the visuals of Cyberpunk 2077. And user interfaces of computers were no exception.

Style 01 — ENTROPISM

Style 02 — KITSCH

Style 03 — NEO MILITARISM

Style 04 — NEO KITSCH

The summary mockup of the styles with appropriate devices

The fragments and snapshots of the process

public static void main(String[FLUFF_SCREENS] args) {
       String className = "USER_INTERFACE";
       String newLine = "\n";
       String tab = "\t";
       String classStart = "public class " + className + " {";
       String closeBracket = "}";
       String mainStart = "public static void main(String[1989] args) {";
       String dummyContent = "";
       String temp = null;
       int size = 10000;
       System.out.println(result); // To display the output to the console
       PrintWriter out = null;
       }
       out.displayln(outputCode);
       out.close();

PART_03

Fluff Screens

One of the assignments for the UI team (and the first one for me), was to create content that would be used in the environment – the variety of monitors, screens, and displays, appearing in the game world in generous numbers. Such a sum divided into sections of the medical content, industrial environment, "matrix" kind of screens for hacker scenarios, then content for civil and generic screens.

That was the first bunch over the years followed by vending machines, refrigerators, a pile of custom content for particular quest scenarios, and for screens delivering more specific information. For example, the first operation Victor does to V, Johnny's questline, or braindance studio setup for Judy, etc.

There were plenty of optimization changes, and also specific game dev production obstacles but we worked hard to achieve the best quality possible with the richest variety ㋛.

The fragments and snapshots of the process

ingame screenshots of use and implementation

public static void main(String[BONUS_PART] args) {
       String className = "USER_INTERFACE";
       String newLine = "\n";
       String tab = "\t";
       String classStart = "public class " + className + " {";
       String closeBracket = "}";
       String mainStart = "public static void main(String[1989] args) {";
       String dummyContent = "";
       String temp = null;
       int size = 10000;
       System.out.println(result); // To display the output to the console
       PrintWriter out = null;
       }
       out.displayln(outputCode);
       out.close();

BONUS_PART

CYBERPUnk EDGERUNNERS

Some of the work I've done for the game was also used in the studio Triggers anime series — Edgerunners. Here are some samples from this wonderful show, which is a great addition to the Cyberpunk universe. If you haven't seen it yet, I say give it a chance ㋛.